<template>
  <div class="myFocusedContainer">
    <!-- 顶部导航 -->
    <div class="top">
      <div class="back" @touchend="$router.back()">
        <yd-icon name="back" custom slot="icon" size=".4rem" color='#ffffff'></yd-icon>
      </div>
      <div class="title">
        关注我的
      </div>
    </div>
    <!-- 列表 -->
    <div class="list">
      <div class="item" v-for="(item,index) in list" :key="index"  @click="detail(index)">
         <div class="upic">
           <img :src="item.photo" alt="">
         </div>
         <div class="uname">
           {{item.name}}
         </div> 
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data(){
      return{
        list:null,
      }
    },
    methods:{
      load(){//获取数据
        let data={
            userID:localStorage.userid
        }
        this.ylAjax.showWhoFocusMe(data)
            .then(res=>{//成功赋值
                if(res.state==0){
                  this.list=res.data
                }
            })
            .catch(error=>{
              throw error
            })
      },
      detail(index){//单个用户点击
        let mob=this.list[index].mobilephone
        let data={
            myphone:localStorage.myphone,
            mobilephone:mob,
            userId:localStorage.userid,
        }
        //此处和用户查找接口相同
        this.ylAjax.searchFriend(data)
            .then(res=>{
              if(res.state==0){
                  let a=res.data.user;
                  a.status1=res.data.statu1;
                  a.status2=res.data.statu2;
                  this.$store.commit("userDetail",a)
                  this.$store.commit('searchPhone',mob)
                  this.$router.push({path:'/common/userIntr',query:{status:'add'}})
              }
            })
      }
    },
    mounted(){
      this.load()
    }
}
</script>
<style lang="less" scoped>
  @import "~less/base";
  .myFocusedContainer{//容器
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      overflow-y: scroll;
      img{
        max-width: 100%;
        max-height: 100%;
      }
      .top{//顶部导航flex
        height: 1rem;
        line-height: 1rem;
        color: @color-t;
        display: flex;
        background-color: @background-a;
        .back{
          flex: 0 0 20%;
          text-align: center;
        }
        .title{
          flex: 0 0 60%;
          font-size: 14px;
          text-align: center;
        }
      }
      .list{//用户列表
      margin-top: .5rem;
        .item{
          display: flex;
          height: 1.22rem;
          border-bottom: 1px solid @color-border4; 
        }
        .upic{//用户头像
          flex: 0 0 20%;
          padding-left: .1rem;
          line-height: 1.22rem;
          img{
            width: .8rem;
            border-radius: 50%;
            vertical-align: middle;
          }
        }
        .uname{
          margin-top: .3rem;
        }
      }
  }
</style>
